<script setup lang="ts">
import { loginApi } from "@/api/login";
import { ElMessage } from "element-plus";
import { reactive } from "vue";
import { useUserStore } from "@/store/modules/user";
import { useRouter } from "vue-router";
const { push } = useRouter();
const userStore = useUserStore();
const formValue = reactive({
  username: "admin",
  password: "admin",
});

// 登录
const login = async () => {
  const ret = await loginApi(formValue);
  const { access_token, refresh_token, userInfo } = ret;
  console.log(access_token);
  console.log(refresh_token);
  console.log(userInfo);
  if (access_token && refresh_token && userInfo) {
    userStore.setUserInfo(userInfo);
    userStore.setAccessToken(access_token);
    userStore.setRefreshToken(refresh_token);
    push("/user");
    ElMessage.success("登录成功");
  }
};

// 注册
const register = async () => {
  // const ret = await axios.post("/user/register", formValue);
  // console.log(ret);
  // if (ret.status === 201) {
  //   ElMessage.success("注册成功");
  // } else {
  //   ElMessage.error(ret.response.data.message);
  // }
};
</script>

<template>
  <div class="login">
    <ElCard>
      <h4>登录</h4>
      <el-form
        label-position="right"
        v-model="formValue"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item label="用户名">
          <el-input v-model="formValue.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formValue.password"></el-input>
        </el-form-item>
        <ElSpace :fill="true" style="width: 100%">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="register">注册</el-button>
        </ElSpace>
      </el-form>
    </ElCard>
  </div>
</template>
<style scoped lang="less">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
h4 {
  text-align: center;
}
</style>
